<template>
  <view :class= "[mask == 'true' || mask == true ? 'mask' : '',maskType == 'white'?'maskWhile':'maskBlock']" @click="Mclose" v-if="show" @touchmove.stop.prevent="preventTouchMove">
		<!-- 加载动画开始 -->    <!-- loading1~loading30挑选任意一个替换下方html 且替换对应css -->
    <view class="container" >
      <!-- 加载动画结束 -->
      <loading></loading>

      <view class="title">{{text}}</view>

    </view>


  </view>
  <!-- 遮罩层-->
</template>

<script scoped="true">
import loading from '../../components/loading7';

export default {
  name: "w-loading",
  components:{
    loading
  },
	props:{
		text: String,
    maskBlack: Boolean,
		mask: Boolean | String,
		click: Boolean | String,
    // white 纯白蒙版  block 黑色透明蒙版
    maskType:{
      type: String,
      default: 'white',
    }

	},
  data() {
    return {
			show: false
		};
  },
	methods:{
		preventTouchMove(){
			console.log('stop user scroll it!');
			return;
		},
		Mclose(){
			if(this.click == 'false' || this.click == false){
				this.show = false
			}
		},
		open(){
			this.show = true
    },
    close(){
      this.show = false
    }
	}
};
</script>

<style>
.mask {
  /* pointer-events: none; */
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
	flex-direction:column;
  justify-content: center;
  align-items: center;
	flex-wrap: wrap;
}
.maskWhile{
	background: #ffffff;
}
.maskBlock {
  background: rgba(7, 17, 27, .3);
}
/* loading加载动画的css */
.container {
  height: 300upx;
  width: 300upx;
  background: #ffffff;
  border-radius: 10rpx;
  position: relative;


}
.title{
  display: block;
  width: 100%;
  text-align: center;
  color: #102D51;
  font-size: 28upx;
  margin-top: 50rpx;
  position: absolute;
  bottom: 60rpx;

}


</style>
